<template>
  <div class="config-module">
    <div class="config-module-title">
      <p>{{ moduleName }}:{{ moduleValue }}</p>
    </div>
    <!--  当前类型节点所生成的实例 -->
    <component :is="moduleType" @change="handleChange" v-model="inputValue" />
  </div>
</template>

<script setup>
// 取生成好的json渲染页面
import { defineProps, computed, defineEmits, ref, onMounted } from "vue";

const props = defineProps({
  moduleJson: Object,
  value: Object,
  name: String,
  currentPickId: String,
  jsonValue: Object,
});
const emit = defineEmits(["changeValue"]);
const moduleName = computed(() => props.moduleJson.title);
const moduleType = computed(() => props.moduleJson.type);

const inputValue = ref();

onMounted(() => {
  const name = props.moduleJson.field;
  inputValue.value = props.jsonValue[name];
});

function handleChange(e) {
  console.log(21, e, props.moduleJson.field);

  emit("changeValue", props.moduleJson.field, e, props.currentPickId);
}
</script>

<style>
.config-module {
  display: flex;
  align-items: center;
}

.config-module-title {
  white-space: nowrap;
  font-size: 14px;
  margin-right: 10px;
}
</style>
